import React, { Component } from 'react'
// todo 添加环境判断
const { ipcRenderer } = window.require('electron')

class Page1 extends Component {
  constructor (props) {
    super()
    console.log(props)

    this.fileInput = React.createRef()
    this.configInput = React.createRef()
    this.state = {
      config: []
    }
  }

  loadRule () {
    console.log('on load')
    const reader = new FileReader()
    reader.onload = (event) => {
      let config = null
      try {
        config = JSON.parse(event.target.result)
      } catch (error) {
        console.log(error)
        return
      }
      console.log('config', config)
      if (Array.isArray(config.rules)) {
        this.setState({
          config: config.rules
        })
      } else {
        this.setState({
          config: []
        })
      }
    }
    reader.readAsText(this.configInput.current.files[0])
  }

  addRule () {
    const rules = this.state.config
    rules.push({
      regExp: '',
      output: [],
      useDefaults: false
    })
    this.setState({
      config: rules
    })
  }

  saveRule () {
    ipcRenderer.invoke('saveRuleConfig', {
      ruleString: JSON.stringify({name: 'aa', age: 18, child: [{name: 'aaa', age: 10, child: []}]}, '', 2)
    }).then((res) => {
      console.log('saveRule', res)
    })
  }

  addRuleOutputPath (data) {
    // todo 写法待优化
    data.push({
      path: '',
      useDefaults: false
    })
    this.setState({
      config: this.state.config
    })
  }

  componentRules () {
    return this.state.config.map((item, index) => {
      return <li className="rules-item" key={index}>
        <input type="text" defaultValue={item.regExp}/>
        <ul>
          {this.componentRulesItem(item.output)}
          <li><button onClick={() => this.addRuleOutputPath(item.output)}>添加导出路径</button></li>
        </ul>
        <label>使用<input type="checkbox" defaultChecked={item.useDefaults}/></label>
      </li>
    })
  }

  componentRulesItem (data) {
    return data.map((item, index) => {
      return <li key={index}>
        <input type="text" defaultValue={item.path}/>
        <label>导出<input type="checkbox" defaultChecked={item.useDefaults}/></label>
      </li>
    })
  }

  outputFile () {
    console.log(this.fileInput.current.files[0])
    ipcRenderer.send('some-name', {
      path: this.fileInput.current.files[0].path
    })
  }

  render () {
    return (
      <div className="page1">
        <div className="action-bar">
          <label htmlFor="">请选择文件<input type="file" ref={this.fileInput}/></label>
        </div>
        <div className="action-bar">
          <label htmlFor="">请选择规则<input type="file" ref={this.configInput} onChange={() => this.loadRule()}/></label>
        </div>
        <div className="action-bar">
          <button onClick={() => this.addRule()}>添加规则</button>
          <button onClick={() => this.saveRule()}>保存规则</button>
          <button onClick={() => this.outputFile()}>拆分日志</button>
        </div>
        <ul className="rules">{this.componentRules()}</ul>
      </div>
    )
  }
}

export default Page1